<script setup lang="ts">
import { ref } from 'vue';
import { NButton, NCard, NForm, NFormItem, NInput, NModal, NSpace } from 'naive-ui';

const emit = defineEmits(['add-friend', 'close']);

const form = ref({
  friendKeyword: '',
  tag: ''
});

const rules = {
  friendKeyword: [{ required: true, message: '请输入用户名或手机号', trigger: 'blur' }],
  tag: [{ required: false, message: '', trigger: 'blur' }]
};

const formRef = ref();
const loading = ref(false);

function handleConfirm() {
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      loading.value = true;
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));
        window.$message?.success('添加成功');
        emit('add-friend');
        handleClose();
      } catch {
        window.$message?.error('添加失败');
      } finally {
        loading.value = false;
      }
    }
  });
}

function handleClose() {
  emit('close');
  form.value = { friendKeyword: '', tag: '' };
}
</script>

<template>
  <NModal :show="true" preset="card" style="max-width: 400px; margin: 0 auto">
    <NCard
      title="添加新好友"
      :bordered="false"
      style="
        border-radius: 16px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
      "
    >
      <NForm ref="formRef" :model="form" :rules="rules" label-placement="top" size="large">
        <NFormItem label="用户名/手机号" path="friendKeyword">
          <NInput v-model:value="form.friendKeyword" placeholder="输入用户名或手机号" />
        </NFormItem>
        <NFormItem label="分组标签" path="tag">
          <NInput v-model:value="form.tag" placeholder="如：同事、同学（可选）" />
        </NFormItem>
        <NSpace justify="end" style="margin-top: 16px">
          <NButton @click="handleClose">取消</NButton>
          <NButton type="primary" :loading="loading" @click="handleConfirm">确认</NButton>
        </NSpace>
      </NForm>
    </NCard>
  </NModal>
</template>

<style scoped>
.n-card {
  border-radius: 16px;
}
</style>
